sessionStorage、localStorage和 cookie 之间的区别

一、概念

我们在编程的时候需要持久化的存储一些数据。对于网络化编程，一般将这项任务交给了服务器端的数据库或者浏览器端的cookie。

HTML5 提供了两种客户端存储数据的新方法：

• localStorage（本地存储） - 没有时间限制的数据存储
• sessionStorage（会话存储） - 针对一个 session 的数据存储

之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。

在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。

HTML5 使用 JavaScript 来存储和访问数据。

二、如何使用sessionStorage、localStorage

1. session storage

session storage存储在 sessionStorage 里面的数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。在新标签或窗口打开一个页面会初始化一个新的会话，这点和 session cookies 的运行方式不同。

// 设置session Storage
sessionStorage.setItem('key', 'value');
sessionStorage.keyName = 'valueName';   // 也可以使用这种方式

// 读取数据
console.log(sessionStorage.getItem('key'));

// 删除数据
sessionStorage.removeItem('value');

// 清空session storage中所有的数据
sessionStorage.clear();

2. local storage

local storagelocalStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

// 设置local Storage
localStorage.setItem('key', 'value');
localStorage.keyName = 'valueName'; // 也可以使用这种方式

// 读取数据
console.log(localStorage.getItem('key'));

// 删除数据
localStorage.removeItem('key');

// 清空local storage中所有的数据
localStorage.clear();

案例:

<script>
    window.onload=function(){
        var color=document.getElementsByClassName('color');
        var face=document.getElementById('face');
        var btn=document.getElementById('btn');
        getlocal('color');
        for(var i=0;i<color.length;i++){
            color[i].onclick=function(){
                var bgcolor=this.style.backgroundColor;//                face.style.backgroundColor=bgcolor;
                setlocal('color',bgcolor);//                存储颜色
                getlocal('color');//                取出颜色并赋给div
            }
        }//        设置本地存储
        function setlocal(k,v){
            window.localStorage.setItem(k,v);
        }//        取出本地存储
        function getlocal(k){
            var divcolor=window.localStorage.getItem(k);
            face.style.backgroundColor=divcolor;//            取出存储在localStorage中的颜色，并赋给div;
        }
    }
</script>

三、sessionStorage、localStorage 和 cookie 之间的区别

• 三者都是在浏览器端存储数据。

1. 数据存储大小限制不同。
   cookies：数据始终在同源的http请求中携带，即cookie在服务器和浏览器间回传。故存储的数据大小最小，一般为4k。
   sessionStorage和localStorage：数据在本地保存，不会自动把数据发给服务器。所以一般5M或者更大。
2. 数据有效期不同
   cookies：数据在cookie设置的有效期之前都有效，即使窗口和浏览器关闭。
   sessionStorage：数据在关闭浏览器窗口后自动清除。存储的数据仅在同源同窗口内有效，即使在不同浏览器相同页面也是无效的。一般用于存储会话数据。
   localStorage：用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
3. 数据作用域不同
   Cookies和localStorage：在所有同源窗口敏感词享。
   sessionStorage：不在不同浏览器窗口敏感词享。

• 请你谈谈Cookie的弊端

1. 每个特定的域名下最多生成的cookie个数有限制
2. IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理cookie
3. cookie的最大大约为4096字节，为了兼容性，一般不能超过4095字节
4. 安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。

• web storage和cookie的区别

1. Cookie的大小是受限的
2. 每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽
3. cookie还需要指定作用域，不可以跨域调用
4. Web Storage拥有setItem,getItem等方法，cookie需要前端开发者自己封装setCookie，getCookie
5. Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生
6. IE7、IE6中的UserData通过简单的代码封装可以统一到所有的浏览器都支持web storage